GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>Web Audio API</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">Web Audio API</h1>

</header>

</div>

<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr">Die Web Audio API ist eine in <a href="JavaScript" title="JavaScript">JavaScript</a> verfasste <a href="Programmierschnittstelle" title="Programmierschnittstelle">API</a> zum Erzeugen und Bearbeiten von <a href="Audiosignal" title="Audiosignal">Audiosignalen</a> in Webapplikationen. Der Standard wird von einer Arbeitsgruppe des <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a> entwickelt und kommt beispielsweise in <a href="Browserspiel" title="Browserspiel">Browserspielen</a> zum Einsatz. Sie kann als Audio-Analogon zum <a href="Canvas_(HTML-Element)" title="Canvas (HTML-Element)">Canvas-Element</a> gesehen werden.

<div class="mw-heading mw-heading2"><h2 id="Funktionsweise">Funktionsweise</h2></div>

Audiosignale werden durch einen mittels Programmcode spezifizierten <a href="Graph_(Graphentheorie)" title="Graph (Graphentheorie)">Graphen</a> (AudioContext) geleitet, in dem jeder Knoten (AudioNode) einen Bearbeitungsschritt repräsentiert und mit anderen Knoten verbunden ist. Es gibt einen Ausgabeknoten, der die Daten je nach Art des Kontexts an die Audioausgabe des Systems, also beispielsweise den <a href="Lautsprecher" title="Lautsprecher">Lautsprecher</a> weiterleitet oder als Binärdaten speichert. Eingabeknoten können ein Audiosignal durch einen <a href="Oszillator" title="Oszillator">Oszillator</a> produzieren oder diese aus anderen Quellen beziehen. Dies können Audiodateien sein, ein angeschlossenes Mikrofon oder <a href="WebRTC" title="WebRTC">WebRTC</a>-Verbindungen. Schließlich gibt es Knoten, die Audiosignale bearbeiten. Hier reicht die Palette von einfachen Manipulationen der Lautstärke über die Anwendung verschiedener <a href="Filter_(Elektrotechnik)" title="Filter (Elektrotechnik)">Filter</a> bis hin zur Möglichkeit, den <a href="Raumklang" title="Raumklang">Raumklang</a> (einschließlich <a href="Doppler-Effekt" title="Doppler-Effekt">Doppler-Effekt</a>) für beliebige Positionen und Bewegungen des Zuhörers neu zu berechnen.<a href="#cite_note-1">[1]</a> <a href="Mehrkanal-Tonsystem" title="Mehrkanal-Tonsystem">Mehrere Tonkanäle</a> werden dabei automatisch angepasst, sofern Quelle und Ziel unterschiedliche Anordnungen verwenden, sie können aber auch über eigene Knoten bearbeitet werden. Es gibt auch Knoten, die das Audiosignal unverändert lassen, aber zur Analyse eine <a href="Schnelle_Fourier-Transformation" title="Schnelle Fourier-Transformation">schnelle Fourier-Transformation</a> durchführen.<a href="#cite_note-2">[2]</a> Bei der Verknüpfung der Knoten sind Schleifen zulässig, sofern einer der enthaltenen Knoten die Ausgabe verzögert. Die Knoten besitzen Parameter, die das genaue Verhalten beschreiben und während der Verarbeitung auch geändert werden können.

Die eigentliche Signalverarbeitung findet hauptsächlich in der zugrundeliegenden Implementation der API statt, jedoch ist auch direkte Bearbeitung in JavaScript möglich.<a href="#cite_note-3">[3]</a>

<div class="mw-heading mw-heading2"><h2 id="Beispiel">Beispiel</h2></div>

Das folgende Beispiel erzeugt einen <a href="Sinuston" title="Sinuston">Sinuston</a>.<a href="#cite_note-4">[4]</a>

<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>//AudioContext erzeugen

var audioCtx = new AudioContext();

//AudioNodes erzeugen

var oscillatorNode = audioCtx.createOscillator();

var gainNode = audioCtx.createGain();

//AudioNodes verbinden

oscillatorNode.connect(gainNode);

gainNode.connect(audioCtx.destination);

//AudioNodes konfigurieren

oscillatorNode.type = 'sine';

oscillatorNode.frequency.value = 2500;

gainNode.gain.value = 0.5;

//Ausgabe starten

oscillatorNode.start();

</pre></div>

Durch eine dynamische Anpassung von <code>oscillatorNode.frequency.value</code> (der Frequenz in <a href="Hertz_(Einheit)" title="Hertz (Einheit)">Hertz</a>) und <code>gainNode.gain.value</code> (der relativen Lautstärke) können so einfache Melodien erzeugt werden.

<div class="mw-heading mw-heading2"><h2 id="Browserunterstützung">Browserunterstützung</h2></div>

Die Web Audio API wird von allen wichtigen aktuellen Browsern unterstützt: <a href="Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a> ab Version 25, <a href="Google_Chrome" title="Google Chrome">Google Chrome</a> ab Version 14 (bis Version 33 nur mit <code>webkit</code>-<a href="Herstellerpr%C3%A4fix" title="Herstellerpräfix">Präfix</a>), <a href="Microsoft_Edge" title="Microsoft Edge">Microsoft Edge</a>, <a href="Opera_(Browser)" title="Opera (Browser)">Opera</a> ab Version 15 (ab Version 22 ohne Präfix) und <a href="Apple_Safari" class="mw-redirect" title="Apple Safari">Safari</a> ab Version 6 (mit Präfix). Auch die meisten mobilen Browser unterstützen die API.<a href="#cite_note-5">[5]</a><a href="#cite_note-6">[6]</a>

Da sich die Spezifikation aber noch in Entwicklung befindet, variiert der Grad der Unterstützung zwischen den verschiedenen Browsern und zwischen unterschiedlichen Version der Browser. Ebenfalls unterschiedlich ist die <a href="Rechenleistung" title="Rechenleistung">Performance</a><a href="#cite_note-7">[7]</a> und die <a href="Debugger" title="Debugger">Debugging</a>-Möglichkeiten.<a href="#cite_note-8">[8]</a>

Für ältere Browser gibt es <a href="Polyfill" title="Polyfill">Polyfills</a>, die über <a href="Adobe_Flash" title="Adobe Flash">Flash</a> oder eine ältere API in Firefox funktionieren.<a href="#cite_note-9">[9]</a>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

<li id="cite_note-1"><a href="#cite_ref-1">↑</a> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics.</a> In: <a href="MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a>. Abgerufen am 5. September 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=Web+audio+spatialization+basics&rft.description=Web+audio+spatialization+basics&rft.identifier=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2FWeb%2FAPI%2FWeb_Audio_API%2FWeb_audio_spatialization_basics&rft.date=&rft.language=en">

</li>

<li id="cite_note-2"><a href="#cite_ref-2">↑</a> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API.</a> In: <a href="MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a>. Abgerufen am 5. September 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=Visualizations+with+Web+Audio+API&rft.description=Visualizations+with+Web+Audio+API&rft.identifier=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FWeb_Audio_API%2FVisualizations_with_Web_Audio_API&rft.date=&rft.language=en">

</li>

<li id="cite_note-3"><a href="#cite_ref-3">↑</a> Chris Rogers: <a rel="nofollow" class="external text" href="https://web.archive.org/web/20120720115514/https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API.</a> <a href="W3C" class="mw-redirect" title="W3C">W3C</a>, 15. März 2012, archiviert vom <style data-mw-deduplicate="TemplateStyles:r250917974">

/* start https://de.wikipedia.org/ */

.mw-parser-output .dewiki-iconexternal>a{background-position:center right!important;background-repeat:no-repeat!important}body.skin-minerva .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/OOjs_UI_icon_external-link-ltr-progressive.svg")!important;background-size:10px!important;padding-right:13px!important}body.skin-timeless .mw-parser-output .dewiki-iconexternal>a,body.skin-monobook .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/MediaWiki_external_link_icon.svg")!important;padding-right:13px!important}body.skin-vector .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/Link.ernal-small-ltr-progressive.svg")!important;background-size:0.857em!important;padding-right:1em!important}

/* end https://de.wikipedia.org/ */

</style><a class="external text" href="https://redirecter.toolforge.org/?url=https%3A%2F%2Fdvcs.w3.org%2Fhg%2Faudio%2Fraw-file%2Ftip%2Fwebaudio%2Fspecification.html">Original</a> am 20. Juli 2012; abgerufen am 4. Juli 2012.  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.<a rel="nofollow" class="external text" href="http://IABotmemento.invalid/https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">@1</a><a rel="nofollow" class="external text" href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">@2</a>Vorlage:Webachiv/IABot/dvcs.w3.org<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=Web+Audio+API&rft.description=Web+Audio+API&rft.identifier=https%3A%2F%2Fweb.archive.org%2Fweb%2F20120720115514%2Fhttps%3A%2F%2Fdvcs.w3.org%2Fhg%2Faudio%2Fraw-file%2Ftip%2Fwebaudio%2Fspecification.html&rft.creator=Chris+Rogers&rft.publisher=%5B%5BW3C%5D%5D&rft.date=2012-03-15&rft.source=https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">

</li>

<li id="cite_note-4"><a href="#cite_ref-4">↑</a> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API.</a> In: <a href="MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a>. Abgerufen am 5. September 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=Using+the+Web+Audio+API&rft.description=Using+the+Web+Audio+API&rft.identifier=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2FWeb%2FAPI%2FWeb_Audio_API%2FUsing_Web_Audio_API&rft.date=&rft.language=en">

</li>

<li id="cite_note-5"><a href="#cite_ref-5">↑</a> <a rel="nofollow" class="external text" href="https://caniuse.com/#feat=audio-api">Can I use: Web Audio API.</a> Abgerufen am 5. September 2016.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=Can+I+use%3A+Web+Audio+API&rft.description=Can+I+use%3A+Web+Audio+API&rft.identifier=https%3A%2F%2Fcaniuse.com%2F%23feat%3Daudio-api&rft.date=">

</li>

<li id="cite_note-6"><a href="#cite_ref-6">↑</a> <a rel="nofollow" class="external text" href="https://www.chromestatus.com/feature/6261718720184320">Unprefixed Web Audio API - Chrome Platform Status.</a> Abgerufen am 5. September 2016.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=Unprefixed+Web+Audio+API+-+Chrome+Platform+Status&rft.description=Unprefixed+Web+Audio+API+-+Chrome+Platform+Status&rft.identifier=https%3A%2F%2Fwww.chromestatus.com%2Ffeature%2F6261718720184320&rft.date=">

</li>

<li id="cite_note-7"><a href="#cite_ref-7">↑</a> Soledad Penadés: <a rel="nofollow" class="external text" href="https://hacks.mozilla.org/2016/08/whats-new-in-web-audio-2/">What’s new in Web Audio?</a> In: Mozilla Hacks. 15. August 2016, abgerufen am 5. September 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=What%E2%80%99s+new+in+Web+Audio%3F&rft.description=What%E2%80%99s+new+in+Web+Audio%3F&rft.identifier=https%3A%2F%2Fhacks.mozilla.org%2F2016%2F08%2Fwhats-new-in-web-audio-2%2F&rft.creator=Soledad+Penad%C3%A9s&rft.date=2016-08-15&rft.language=en">

</li>

<li id="cite_note-8"><a href="#cite_ref-8">↑</a> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor.</a> In: <a href="MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a>. Abgerufen am 5. September 2016 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=Web+Audio+Editor&rft.description=Web+Audio+Editor&rft.identifier=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FTools%2FWeb_Audio_Editor&rft.date=&rft.language=en">

</li>

<li id="cite_note-9"><a href="#cite_ref-9">↑</a> g200kg: <a rel="nofollow" class="external text" href="https://github.com/g200kg/WAAPISim">WAAPISim.</a> In: <a href="GitHub" title="GitHub">GitHub</a>. Abgerufen am 6. September 2016.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AWeb+Audio+API&rft.title=WAAPISim&rft.description=WAAPISim&rft.identifier=https%3A%2F%2Fgithub.com%2Fg200kg%2FWAAPISim&rft.creator=g200kg&rft.date=">

</li>

</ol>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://www.w3.org/TR/webaudio/">Spezifikation</a></li>

<li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> auf <a href="MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a></li>

<li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Using_Web_Audio_API">Using Web Audio API</a> auf MDN Web Docs</li>

<li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a> auf MDN Web Docs</li></ul></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2024-03-21" href="https://de.wikipedia.org/wiki/?title=Web_Audio_API&oldid=243324401">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>